<template>
  <div class="newarticles">
    <Transition>
      <div class="title_choose">
        <button>
          {{ title_style
          }}<svg
            t="1660145109217"
            class="icon"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2511"
            width="200"
            height="200"
          >
            <path
              d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z"
              p-id="2512"
            ></path>
          </svg>
        </button>
        <div class="spans">
          <span @click="title_style = item" v-for="item in title_styles">{{
            item
          }}</span>
        </div>
      </div>
    </Transition>
    <div class="artcle">
      <div class="title">
        <p>标题：</p>
        <input
          type="text"
          maxlength="16"
          placeholder="最多16个字"
          v-model="title"
        />
      </div>
      <div
        class="a_link"
        v-if="!(title_style === '个人生活') && !(title_style === '关于博客')"
      >
        <p>项目链接：</p>
        <input type="text" v-model="project_link" />
      </div>
      <textarea cols="60" rows="20" v-model="textarea"></textarea>
      <div class="somecharacter"></div>
    </div>
    <div class="tool">
      <aclock></aclock>
      <img
        :src="this.$store.state.img"
        :onerror="errimg"
        @click="this.$store.state.imgChoose = true"
      />

      <p @click="postArticle">发布</p>
    </div>
    <postimg></postimg>
  </div>
</template>

<script>
import { postArticle } from "@/request/api/Articles.js";
import aclock from "@/components/Clock/Clock.vue";
import postimg from "@/components/Views/backstage/PostImage.vue";
import errorImg from "@/assets/img.png";


export default {
  name:"NewArticles",
  //   mounted() {
  //     document.addEventListener("click", (e) => {
  //       if (!this.$refs.isselect.contains(e.target)) {
  //         this.is_select = false;
  //       }
  //     });
  //   },
  computed: {
    errimg() {
      return 'this.src="' + errorImg + '"';
    },
  },
  data() {
    return {
      title: "",
      title_style: "项目中心",
      title_styles: ["项目中心", "维护广场", "个人生活", "关于博客"],
      textarea: ``,
      project_link: "http://www.",
    };
  },
  components: {
    aclock,
    postimg,
  },
  methods: {
    async postArticle() {
      if (!this.textarea || !this.title_styles || !this.$store.state.img)
        return ElMessage({
          message: "有内容为空",
          type: "warning",
          duration: 1500,
        });
      const {data}  = await postArticle([
        this.title_style,
        this.title,
        this.project_link,
        this.$store.state.img,
        this.textarea,
      ])
      if(data.status ===200){
         return ElMessage({
          message: "发布成功",
          type: "success",
          duration: 1500,
        });
      }else{
        return ElMessage({
          message: "未知错误,发布失败",
          type: "error",
          duration: 1500,
        });
      }

    },
    resetDate() {
      this.$store.state.img = "";
      this.title = "";
      this.textarea = ``;
      this.project_link = `http://www.`;
    },
  },
};
</script>

<style lang="less" scoped>
// .v-enter-active,
// .v-leave-active {
//   transition: height 1s ease-in;
// }
// .v-enter-from,
// .v-leave-to {
//   height: 0px;
// }
// .v-enter-to,
// .v-leave-from {
//   height: 400px;
// }

.newarticles {
  letter-spacing: 1.5px;
  display: flex;
  .artcle {
    margin: 15px;
    display: flex;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
      p {
        font-size: 25px;
      }
      input {
        width: 400px;
        color: rgb(2, 159, 128);
        font-weight: 600;
      }
      input:focus {
        outline: rgb(9, 57, 201) solid 1px;
        box-shadow: 0 0 0 2.5px rgba(44, 98, 246, 0.4);
      }
    }
    .a_link {
      display: flex;
      p {
        font-size: 25px;
      }
      input {
        flex: 1;
        font-size: 20px;
        color: rgb(0, 97, 252);
      }
      input:focus {
        outline: rgb(9, 57, 201) solid 1px;
        box-shadow: 0 0 0 2.5px rgba(44, 98, 246, 0.4);
      }
    }
    textarea {
      margin-top: 25px;
      letter-spacing: 1.5px;
      resize: none;
      font-size: 20px;
      outline: none;
      background-color: rgb(193, 193, 193);
    }
  }

  .title_choose {
    width: 200px;
    display: flex;
    flex-direction: column;
    margin: 10px;
    font-size: 16px;
    color: rgb(197, 197, 197);

    button {
      color: rgb(197, 197, 197);
      width: 200px;
      text-align: left;
      padding: 8px;
      background-color: #333740;
      font-size: 18px;
      outline: none;
      border: none;
      border: 1.5px solid #4f534f;
      border-radius: 10px;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      letter-spacing: 1.5px;
      display: flex;
      justify-content: space-between;
      svg {
        fill: rgb(215, 215, 215);
        width: 23px;
        height: 23px;
        margin-right: 10px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
    }
    button:hover,
    button:focus {
      color: #fff;
    }
    button:focus {
      border: 1.5px solid rgb(3, 3, 135);
      box-shadow: 0 0 0 2.5px rgba(44, 98, 246, 0.4);
    }
    button:focus svg {
      transform: rotateX(180deg);
    }
    button:focus + .spans {
      height: 160px;
    }
    div {
      overflow: hidden;
      margin-top: 3px;
      width: 200px;
      height: 0px;
      display: flex;
      flex-direction: column;
      background-color: #333740;
      border-radius: 10px;
      transition: height 0.2s ease-in;
      transform-origin: top;
      span {
        padding: 7px 9px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      span:hover {
        background-color: #3c3d3d;
      }
    }
  }
  .tool {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    img {
      margin-top: 50px;
      width: 330px;
      height: 215px;
    }
    p {
      margin-top: 100px;
      align-self: center;
      text-align: center;
      line-height: 50px;
      width: 100px;
      height: 50px;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      border-radius: 20px;
      box-shadow: 0 0 5px 8px #747474;
      background-color: #3c3d3d;
      cursor: pointer;
      text-shadow: 0 0 10px rgba(3, 206, 192, 0.482),
        0 0 20px rgba(3, 206, 192, 0.482), 0 0 30px rgba(3, 206, 192, 0.482),
        0 0 40px rgba(3, 206, 192, 0.482);
      border: 2px solid #5d5d5d;
    }
  }
}
</style>